import React, { useState, useEffect } from 'react'
import { NavBar, Collapse, Toast ,Button} from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'
function Index() {
     const navigate = useNavigate()
    const [list, setList] = useState([])
    const xuanRan = async () => {
        const res = await axios.get('/api/list')
        console.log(res, 'res===')
        const { code, data, message } = res.data
        if (code == 200) {
            Toast.show(message)
            setList([...list, ...data])
        }
    }
    useEffect(() => {
        xuanRan()
    }, [])
    const tz = (item) => {
        navigate(`/outlist`,{state:item})
    }
  return (
    <div >
         <Collapse accordion arrowIcon={(active)=>active ? <Button color='danger' size='mini'>已取消</Button> :   <Button color='warning' size='mini'>已使用</Button>}>
                {
                    list.length > 0 && list.map((item, index) => {
                        return <Collapse.Panel    key={index} title={
                            <div>
                                <img src={item.image} style={{ width: '150px', height: '150px' }} alt="" />
                                        <p>{item.title}</p>
                                <p>{item.date}</p>
                                <p>￥{ item.price}</p>
                            </div>
                        }
                         
                        >
                            <div onClick={()=>tz(item)}>
                                   <p>{item.title}</p>
                                        <p>{item.date}</p>
                            </div>
                        
                        </Collapse.Panel>
                    })
                }
            </Collapse>
    </div>
  )
}

export default Index
